import { useMemo } from "react"
import { Image, View } from "@tarojs/components"
import { useAppDispatch, useAppSelector } from "@/store/hook"
import { setActive } from "@/store/actions/tabbar"
import { navigation } from "@/utils/router"
import { pageMapperCommunity, tabbarPages } from "@/constants/pageMap"
import { hasChosenInfo } from "@/utils/auth"
import { authActionHandler } from "@/utils/app"

export default function CustomTabbar() {
  const dispatch = useAppDispatch()
  const { tabBar, current, appear } = useAppSelector(state => state.tabbar)
  const { left, right } = useMemo(() => {
    return {
      left: tabBar.list.slice(0, 2),
      right: tabBar.list.slice(2)
    }
  }, [tabBar.list])
  function handleChangeTab(tabbarItem: TabBarListItem) {
    if (current !== tabbarItem.pagePath) {
      dispatch(setActive(tabbarItem.pagePath))
      navigation(tabbarItem.pagePath, null, "switchTab")
    }
  }
  function handleClickAction() {
    authActionHandler(navigateToPublishNote, {
      mobile: true,
      avatarAndNickname: true
    })
  }
  function navigateToPublishNote() {
    dispatch(setActive(null))
    navigation(pageMapperCommunity.NotePublish, null)
  }
  if (!appear) return null
  return (
    <View
      style={{
        position: "fixed",
        bottom: 0,
        left: 0,
        right: 0,
        width: "100%",
        boxSizing: "content-box",
        backgroundColor: tabBar.backgroundColor
      }}
    >
      <View
        style={{
          height: 56,
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-around",
          alignItems: "center",
          boxSizing: "border-box"
        }}
      >
        {left.map(l => (
          <View
            key={l.pagePath}
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              boxSizing: "border-box",
              paddingLeft: 16,
              paddingRight: 16,
              pointerEvents: "auto"
            }}
            onClick={() => handleChangeTab(l)}
          >
            <Image
              src={l.pagePath === current ? l.selectedIconPath : l.iconPath}
              style={{
                width: 28,
                height: 28,
                display: "block"
              }}
            />
            <View
              style={{
                color: l.pagePath === current ? tabBar.selectedColor : tabBar.color,
                fontSize: 12,
                marginTop: 4
              }}
            >
              {l.text}
            </View>
          </View>
        ))}
        <View
          style={{
            width: 70,
            height: 70,
            transform: `translateY(-17px)`,
            borderRadius: "50%",
            marginLeft: 16,
            marginRight: 16,
            boxSizing: "border-box",
            backgroundImage:
              "url(https://static.91goodschool.com/UpFiles/public/yikao/home-pulish.png)",
            backgroundSize: "100% 100%",
            backgroundRepeat: "no-repeat"
          }}
          onClick={handleClickAction}
        ></View>
        {right.map(l => (
          <View
            key={l.pagePath}
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              boxSizing: "border-box",
              paddingLeft: 16,
              paddingRight: 16,
              pointerEvents: "auto"
            }}
            onClick={() => handleChangeTab(l)}
          >
            <Image
              src={l.pagePath === current ? l.selectedIconPath : l.iconPath}
              style={{
                width: 28,
                height: 28,
                display: "block"
              }}
            />
            <View
              style={{
                color: l.pagePath === current ? tabBar.selectedColor : tabBar.color,
                fontSize: 12,
                marginTop: 4
              }}
            >
              {l.text}
            </View>
          </View>
        ))}
      </View>
      {/* safe area */}
      <View
        style={{
          backgroundColor: tabBar.backgroundColor,
          height: `calc(env(safe-area-inset-bottom))`
        }}
      ></View>
    </View>
  )
}
